import React from 'react';
import ReactDom from 'react-dom';
import $ from 'webpack-zepto';
import Activity from '../activity/index/activity';
import List from './view/list.js';
import Carousel from './view/carousel.js';
import Nav from './view/nav.js';
import Weather from './view/weather';
import Config from '../common/config.js';
import Auth from '../common/auth.js';
import Loader from '../common/loader.js';
import Util from '../common/util.js';

export default class Index extends React.Component{

    render(){
        Util.storage().remove('toBuyGoods');
        var data = this.props.data,goodsPackage='';
        this.setBackground();
        if(data.goodsPackage && data.goodsPackage.length > 0){
            goodsPackage = <Carousel data={this.props.data.goodsPackage} type={this.props.data.aqi.quality}></Carousel>;
        }
        return (
            <div className="outer">
                {this.setActivity()}
                <div key="header">
                    <img className="header" src="images/header.png"/>
                </div>
                <Weather data={this.props.data.aqi}></Weather>
                <div key="middle">
                    <img className="middle" src="images/middle.png"/>
                </div>
                <Nav appId={this.props.appId}></Nav>
                <List data={this.props.data.goods} appId={this.props.appId}></List>
                <div key="bottom">
                    <img className="bottom" src="images/bottom.png"/>
                </div>
                {goodsPackage}
            </div>
        );
    };

    setBackground(){
        var quality = this.props.data.aqi.quality;
        var imageName = 'goodBg.jpg';
        if('优' == quality){
            imageName = 'goodBg.jpg';
        }else if('良' == quality || '中度污染' == quality || '轻度污染' == quality){
            imageName = 'sosoBg.jpg';
        }else if('差' == quality || '重度污染' == quality || '严重污染' == quality){
            imageName = 'badBg.jpg';
        }

        $('#index').css('background-image','url("../images/'+ imageName +'")');
    };

    setActivity(){
        var activityArr = this.props.data.activity;
        var activity = '';
        if(activityArr && activityArr.length > 0){
            activity = <Activity img={activityArr[0].act_image}></Activity>;
        }
        return activity;
    };
};


var appId = getAppId();
if(Auth.isLogin(appId)){
    // var token =
    $.ajax({
        url : Config.path('duolu',['?appId=' + appId]),
        type : 'get',
        dataType : 'json',
        beforeSend : function () {
            Loader.start();
        },
        success : function(resp){
            if(resp.status == 200){
                getWeiXinJSApi(appId);
                ReactDom.render(
                    <Index data={resp.data} appId={appId}></Index>,
                    $('#index')[0]
                );
            }
            Loader.end();
        }
    });
}

function getAppId(){
    var appId = Util.appId();
    if(!appId){
        console.error("There is no appid in the url param");
        return "";
    }

    Util.storage().put('appId',appId);
    return appId;
};

function getWeiXinJSApi(appId){
    var token = Util.storage().get(appId);
    $.ajax({
        url : Config.path('/duolu/user',['?uToken=' + token,'&JsApi']),
        type : 'get',
        success : function(resp){
            if(resp.status == 200){
                Util.storage().put('noncestr',resp.data.noncestr);
                Util.storage().put('jsapi_ticket',resp.data.ticket);
                Util.storage().put('timestamp',resp.data.timestamp);
            }
        }
    });
};
